<template>
  <div class="a_main">
    <el-card>
      <!-- 博客信息 -->
      <div class="info">
        <el-row>
          <el-col :span="5">
            <el-avatar :src="blog.user.iconUrl"></el-avatar>
            <span class="blog_info blog_username">
              {{ blog.user.nickName }}</span
            >
          </el-col>

          <el-col :span="6">
            <span class="blog_info">{{ blog.createTime }}</span>
          </el-col>
          <el-col :span="3" :offset="9">
            <span class="blog_info"
              ><i class="el-icon-view"></i> {{ blog.totle }}</span
            >
          </el-col>
        </el-row>
      </div>
      <!-- 博客标题 -->
      <h1>{{ blog.title }}</h1>
      <!-- 博客详情内容 -->
      <div class="main">
        <div class="intro main">
          {{ blog.intro }}
        </div>
        <div class="img main">
          <el-image
            style="width: 100%; height: 400px"
            :src="blog.imageUrl"
            :fit="fit"
          ></el-image>
        </div>
        <div class="content main">
          {{ blog.content }}
        </div>
        <el-divider></el-divider>
      </div>
      <!-- 博客评论 -->
      <div class="comment">
        <h3>评论</h3>
        <div class="comment_post">
          <el-form
            :model="comment"
            status-icon
            :rules="rules"
            ref="comment"
            label-width="80px"
            class="demo-ruleForm"
            size="small"
          >
            <el-form-item label="昵称" prop="nickName">
              <el-input
                v-model="comment.nickName"
                autocomplete="off"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="评论" prop="content">
              <el-input
                type="textarea"
                v-model="comment.content"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('comment')"
                >提交</el-button
              >
              <el-button @click="resetForm('comment')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 所有评论 -->
        <div class="comment_all">
          <h3>所有评论</h3>
          <ul>
            <li v-for="(item, index) in comments" :key="index">
              <el-row class="comment_info">
                <el-col :span="4">{{ item.nickName }}</el-col>
                <el-col :span="6">{{ item.createTime }}</el-col>
              </el-row>
              <div class="comment_content">{{ item.content }}</div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fit: "scale-down",
      url: " ",
      blog: {},
      comment: {
        bid: this.$route.params.id,
        nickName: "",
        content: "",
      },
      comments: [],
      rules: {
        nickName: [
          { required: true, message: "请输入昵称名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入评论", trigger: "blur" },
          {
            min: 0,
            max: 200,
            message: "长度在 0 到 200 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (!valid) return;
        var d = await this.$http.post("/comment", this.comment);
        if (d.code == 200) {
          this.$message({
            message: d.message,
            type: "success",
          });
          this.getAllComment(this.comment.bid);
          this.resetForm(formName);
        } else {
          this.$message({
            message: d.message,
            type: "error",
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async getBlogById(bid) {
      var d = await this.$http.get("blog/" + bid);
      if (d.code == 200) {
        this.blog = d.data;
        this.$message({
          message: d.message,
          type: "success",
        });
      } else {
        this.$message({
          message: "请求失败",
          type: "error",
        });
      }
    },
    async getAllComment(bid) {
      var d = await this.$http.get("comment/" + bid);
      this.comments = d.data;
    },
  },
  mounted: function () {
    var id = this.$route.params.id;
    this.getBlogById(id);
    this.getAllComment(id);
  },
};
</script>
<style scoped>
.info {
  border-bottom: 1px solid #b8c0cc;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.main {
  margin: 15px 0;
}
.intro {
  font-size: 0.9em;
}
.content {
  font-size: 1.1em;
  line-height: 28px;
}
.blog_info {
  line-height: 40px;
  color: #b8c0cc;
}
.blog_username {
  display: inline-block;
  margin-left: 6px;
}
.comment_post {
  margin: 30px 0;
  border-bottom: 1px solid #b8c0cc;
}
.comment_all ul li {
  width: 80%;
  margin: 10px auto;
  border-bottom: 1px solid #b8c0cc;
  padding: 3px 5px;
}
.comment_info {
  line-height: 40px;
  color: #b8c0cc;
}
.comment_content {
  padding-bottom: 10px;
}
</style>
